<template>
  <view class="goods-list-container">
    <!-- 页面头部 -->
    <view class="header">
      <search class="search" />
      <!-- 切换列表显示方式 -->
      <view class="list-type" @click="handleListType">
        <text class="iconfont icon-view-tile" v-if="listType === 0"></text>
        <text class="iconfont icon-view-list" v-if="listType === 1"></text>
      </view>
    </view>

    <!-- 排序标签栏 -->
    <view class="sort-tab">
      <view
        class="sort-item"
        :class="{ active: sortType === 'all' }"
        @click="handleSortType('all')"
      >
        <text>综合</text>
      </view>
      <view
        class="sort-item"
        :class="{ active: sortType === 'sales' }"
        @click="handleSortType('sales')"
      >
        <text>销量</text>
      </view>
      <view
        class="sort-item"
        :class="{ active: sortType === 'price' }"
        @click="handleSortType('price')"
      >
        <text>价格</text>
        <view class="price-arrow">
          <view
            class="icon up"
            :class="{ active: sortType === 'price' && sortPrice === 0 }"
          >
            <text class="iconfont icon-arrow-up"></text>
          </view>
          <view
            class="icon down"
            :class="{ active: sortType === 'price' && sortPrice === 1 }"
          >
            <text class="iconfont icon-arrow-down"></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <!-- 左右结构 -->
    <view class="goods-list-0" v-if="listType === 0">
      <view
        style="display: flex"
        class="goods-item-0"
        v-for="(item, i) in goodsList"
        :key="i"
      >
        <image style="width: 240rpx" mode="widthFix" :src="item.goods_image" />
        <view>{{ item.goods_name }}</view>
      </view>
    </view>
    <!-- 上下结构列表 -->
    <view class="goods-list-1" v-if="listType === 1">
      <view class="goods-item-1" v-for="(item, i) in goodsList" :key="i">
        <image style="width: 240rpx" mode="widthFix" :src="item.goods_image" />
        <view>{{ item.goods_name }}</view>
      </view>
    </view>
  </view>
</template>

<script>
// 导入网络请求函数
import request from '@/utils/request';

export default {
  data() {
    return {
      // 列表类型：0 列表、1 左右平铺
      listType: 0,
      // 排序类型
      sortType: 'all',
      // 价格排序：0 从低到高，1 从高到低
      sortPrice: 0,
      // 页面传入参数
      options: {},
      // 商品列表数据
      goodsList: [],
    };
  },

  onLoad(options) {
    // 页面传入数据
    this.options = options;
    console.log('商品列表页传入数据', this.options);
    // 获取商品列表
    this.getGoodsList();
  },

  methods: {
    handleListType() {
      if (this.listType === 0) {
        this.listType = 1;
      } else {
        this.listType = 0;
      }
    },
    handleSortType(type) {
      this.sortType = type;
      if (type === 'price') {
        this.sortPriceAsc = !this.sortPriceAsc;
      }
    },
    getGoodsList(pageNo = 1) {
      const param = {
        sortType: this.sortType,
        sortPrice: this.sortPrice,
        categoryId: this.options.categoryId || 0,
        goodsName: this.options.search || '',
        page: pageNo,
      };
      console.log('商品列表查询参数', param);
      request.get('/goods/list', param).then((result) => {
        console.log('获取商品列表数据', result.data.list);
        this.goodsList = [...result.data.list.data, ...this.goodsList];
        console.log('商品列表页的数据', this.goodsList);
      });
    },
  },
};
</script>

<style lang="scss">
.goods-list-container {
  .header {
    display: flex;

    .search {
      flex: 1;
    }

    .list-type {
      display: flex;
      align-items: center;
      padding: 0 32rpx;
    }
  }

  .sort-tab {
    display: flex;
    padding: 20rpx 0;
    font-size: 28rpx;
    background: #fff;
    color: #000;

    .sort-item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      &.active {
        color: #e49a3d;
      }

      .icon {
        color: #000;

        &.active {
          color: #e49a3d;
        }

        &.up {
          margin-bottom: -16rpx;
        }

        &.down {
          margin-top: -16rpx;
        }
      }
    }
  }
}
</style>
